<!--
 * @Date: 2022-03-26 17:25:09
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-26 19:56:15
 * @FilePath: \vue3Components\src\components\chooseTime\chooseTime.vue
 * @Description: something
-->
<template>
  <div class="timeBox">
    <div>
      <el-time-select
        v-model="startTimeSelect"
        :start="startTimeStart"
        :step="startTimeStep"
        :end="startTimeEnd"
        :placeholder="startTimeText"
        v-bind="$attrs.startTimeOptions"
      />
    </div>
    <div>
      <el-time-select
        v-model="endTimeSelect"
        :min-time="startTimeSelect"
        :start="endTimeStart"
        :step="endTimeStep"
        :end="endTimeEnd"
        :placeholder="endstartTimeText"
        :disabled="endTimeSelectDisable"
        v-bind="$attrs.endTimeOptions"
      />
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { ref, watch } from 'vue'
let startTimeSelect = ref<string>('')
let endTimeSelect = ref<string>('')
let endTimeSelectDisable = ref<boolean>(true)
const props = defineProps({
  startTimeText: {
    type: String,
    default: '请选择开始时间'
  },
  endstartTimeText: {
    type: String,
    default: '请选择结束时间'
  },
  startTimeStart: {
    type: String,
    default: '08:30'
  },
  startTimeStep: {
    type: String,
    default: '00:15'
  },
  startTimeEnd: {
    type: String,
    default: '24:00'
  },
  endTimeStart: {
    type: String,
    default: '08:00'
  },
  endTimeStep: {
    type: String,
    default: '00:15'
  },
  endTimeEnd: {
    type: String,
    default: '24:00'
  }
})
const emits = defineEmits(['changeEndTime', 'changeStartTime'])
watch(() => startTimeSelect.value, val => {
  if (val !== '') {
    endTimeSelectDisable.value = false
    emits('changeStartTime', val)
    endTimeSelect.value = ''
  } else {
    endTimeSelectDisable.value = true
    endTimeSelect.value = ''
  }
})
watch(() => endTimeSelect.value, val => {
  if (val !== '') {
    emits('changeEndTime', {
      startTime: startTimeSelect.value,
      endTime: endTimeSelect.value
    })
  }
})
</script>
<style lang='less' scoped>
.timeBox {
  display: flex;
  & > div {
    margin-right: 10px;
  }
}
</style>